<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
</html>
<body>

<div id="login-frame">
    <p id="image-logo"><img src="loginui/camera.png" style="width: 50px;height: 50px;"></p>
    <span  style="font-size:x-small;color: red;text-align:center;display: block ">登录失败,请检查用户名和密码是否输入正确</span>
    <form id="login-form" action="/user/login">
        <p><label class="label-input">用户类型</label>
            <select name="user" class="text-field" >
                <option selected >===========请选择===========</option>
                <option value="public" >普通用户</option>
                <option value="super" >超级管理者</option>
            </select>
        </p>
        <p><label class="label-input">用户名</label><input type="text" id="username" name="username" class="text-field" maxlength="20"/></p>
        <p><label class="label-input">密码</label><input type="password" id="password" name="password" class="text-field" maxlength="10"/></p>
        <div id="login-control">
            <input type="submit" id="btn-login" value="登录" />
            <a id="forget-pwd" href="newregister.html">点击注册！</a>
        </div>
    </form>
</div>
</body>
<style>
    body {
        /*让背景图片拉伸且占据整个屏幕*/
        background-image: url("loginui/login.png");
        background-size: cover;
        background-repeat: no-repeat;
    }

    #login-frame {
        /*让一个div块在整个屏幕居中*/
        width: 400px;
        height: 360px;
        padding: 13px;
        position: absolute;
        left: 50%;
        top: 50%;
        /*其中的margin-left和margin-top最好是设为width和height的一半值，
        那样是完全居中的效果，当然记得前面要加个负号*/
        margin-left: -200px;
        margin-top: -200px;
        /*设置背景颜色且加透明效果*/
        background-color: rgba(240, 255, 255, 0.5);
        /*设置圆角*/
        border-radius: 10px;
        text-align: center;
    }
    /*让输入框和label对齐居中*/
    form p > * {
        display: inline-block;
        vertical-align: middle;
    }

    #image-logo {
        margin-top: 22px;
    }

    .label-input {
        font-size: 14px;
        font-family: 宋体;

        width: 65px;
        height: 28px;
        line-height: 28px;
        text-align: center;

        color: white;
        background-color: rgba(108, 8, 10, 0.8);
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }

    .text-field {
        width: 278px;
        height: 28px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        border: 0;
    }

    #btn-login {
        font-size: 14px;
        font-family: 宋体;
        /*给一个label或者button里面的文字设置居中*/
        width: 120px;
        height: 28px;
        line-height: 28px;
        text-align: center;

        color: white;
        background-color: rgba(108, 8, 10, 0.8);
        border-radius: 6px;
        border: 0;

        float: left;
    }

    #forget-pwd {
        font-size: 12px;
        color: black;
        /*去除链接的下划线*/
        text-decoration: none;
        position: relative;
        float: right;
        top: 5px;

    }

    #forget-pwd:hover {
        color: white;
        text-decoration: underline;
    }

    #login-control {
        padding: 0 28px;
    }
</style>
</body>
</html>